<template>
  <div class="configuration-situation">
    <div class="con-title">
      <span>事件发生趋势</span>
      <el-select v-model="timeValue" placeholder="请选择" @change="changeTime">
        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="content" style="margin-top: 10px">
      <LineChart v-if="option.xAxis.length > 0" ref="line_chart" />
      <el-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script>
import LineChart from './LineChart'
import { mapState } from 'vuex'
import { trend } from '@/api/specialProject/userPortrait'
export default {
  components: { LineChart },
  props: {
    ip: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      timeValue: '2',
      timeOptions: [
        { label: '近一日', value: '1' },
        { label: '近一周', value: '2' },
        { label: '近一月', value: '3' },
      ],
      loading: true,
      option: {
        color: ['#3B8BFF', '#3ABF81'],
        xAxis: ['07-08', '07-09', '07-10', '07-11'],
        legendName: ['事件总数', '已处置数据'],
        value: [
          {
            name: '事件总数',
            value: [100, 234, 467, 125],
          },
          {
            name: '已处置数据',
            value: [400, 134, 267, 625],
          },
        ],
      },
    }
  },

  computed: {
    ...mapState({
      assetsObj: (state) => state.portrait.assetsObj,
    }),
  },
  mounted() {
    const _this = this
    setTimeout(() => {
      _this.getData({ searchType: this.timeValue })
    }, 500)
  },
  methods: {
    getData(val) {
      this.option.xAxis = []
      this.option.value = [
        {
          name: '事件总数',
          value: [],
        },
        {
          name: '已处置数据',
          value: [],
        },
      ]
      this.loading = true
      const _this = this
      trend({ ip: this.assetsObj.equipmentIp || this.ip, ...val }).then((res) => {
        this.loading = false
        const arr1 = []
        res.map((item) => {
          this.option.xAxis.push(item.logTime)
          this.option.value[0].value.push(item.total)
          this.option.value[1].value.push(item.disposed)
        })
        this.$nextTick(() => {
          _this.$refs.line_chart?.getData(this.option)
        })
      })
    },
    changeTime() {
      this.getData({ searchType: this.timeValue })
    },
  },
}
</script>

<style lang="scss" scoped>
#app.dark-theme {
  .configuration-situation {
    background: transparent !important;
  }
}
.configuration-situation {
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  .con-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 40px;
    font-weight: 700;
    font-size: 16px;
  }
}
</style>
